<template>
  <div @touchstart="startSlide" @touchmove.stop.prevent="sliding" @touchend="endSlide">
    <slot></slot>
  </div>
</template>

<script>
export default {
  props: ['options'],
  name: 'fullpage',
  data () {
    return {
      startY: 0,
      endY: 0,
      changeY: 0,
      slidingArr: [],
      windowHeight: 0,
      nowTop: 0,
      nowPage: 0,
      // User_Options
      discern: this.options.discern ? this.options.discern : 2, // 灵敏度 默认2
      height: this.options.height ? this.options.height : '100vh'// 设置容器高度，考虑到一些情况，高度可能会被nav或内外边距占用 默认100vh
    }
  },
  created () {
    this.windowHeight = window.innerHeight
  },
  mounted () {
    const container = document.getElementById('container')
    container.style.height = this.height
    // bounces('1')
  },
  updated () {
    const pageLength = document.getElementsByClassName('page').length
    const pageLengthArr = []
    for (let i = 0; i < pageLength; i++) {
      pageLengthArr.push(-document.getElementsByClassName('page')[i].offsetTop)
    }
    this.slidingArr = pageLengthArr
  },
  methods: {
    startSlide (event) {
      this.startY = event.changedTouches[0].screenY
      this.changeY = 0
    },
    sliding (event) {
      const container = document.getElementById('container')
      container.style.transition = 'none'
      this.slidingArr.push(event.changedTouches[0].screenY)
      this.changeY = this.slidingArr.pop() - this.startY
      if (this.nowPage === this.slidingArr.length - 1 && this.changeY < 0) {
        container.style.transform = `translate3d(0,${
        this.nowTop + this.changeY / 5
      }px,0)`
      } else if (this.nowPage === 0 && this.changeY > 0) {
        container.style.transform = `translate3d(0,${
        this.nowTop + this.changeY / 5
      }px,0)`
      } else {
        container.style.transform = `translate3d(0,${
        this.nowTop + this.changeY
      }px,0)`
      }
    },
    endSlide () {
      const container = document.getElementById('container')
      container.style.transition = 'all 0.2s ease'
      if (this.changeY < 0) {
        if (Math.abs(this.changeY) <= this.windowHeight / this.discern || this.nowPage === this.slidingArr.length - 1) {
          container.style.transform = `translate3d(0,${this.nowTop}px,0)`
        } else if (Math.abs(this.changeY) > this.windowHeight / this.discern) {
          this.nowPage += 1
          container.style.transform = `translate3d(0,${
            this.nowTop - this.windowHeight
          }px,0)`
          this.nowTop = -this.nowPage * this.windowHeight
        }
      } else {
        if (Math.abs(this.changeY) <= this.windowHeight / this.discern || this.nowPage === 0) {
          container.style.transform = `translate3d(0,${this.nowTop}px,0)`
        } else {
          this.nowPage -= 1
          container.style.transform = `translate3d(0,${
            this.nowTop + this.windowHeight
          }px,0)`
          this.nowTop = -this.nowPage * this.windowHeight
        }
      }
    }
  }
}
</script>

<style lang="less" scope>
#fullpage {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  overflow-y: hidden;
  display: block;
  // position: absolute;
}

// h1 {
//   font-size: 36px;
// }
// h2 {
//   font-size: 24px;
// }
.page {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
.page:nth-child(1) {
  background-color: crimson;
}
.page:nth-child(2) {
  background-color: rgb(20, 220, 30);
}
.page:nth-child(3) {
  background-color: rgb(20, 190, 220);
}
.page:nth-child(4) {
  background-color: rgb(220, 100, 20);
}
.page:nth-child(5) {
  background-color: rgb(183, 85, 228);
}
.page:nth-child(6) {
  background-color: rgb(220, 43, 20);
}

</style>
